<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-06-06 14:54:52
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-10-14 10:32:53
 * @FilePath     : \rpms\src\components\treeTable\index.vue
-->
<template>
  <el-table
    v-if="model.data.length > 0"
    :data="model.tableData"
    style="width: 100%; margin-bottom: 20px"
    scrollbar-always-on
    row-key="id"
    border
    default-expand-all
  >
    <TreeTableColumn
      :colunms="model.colunms"
      :data="model.data"
      :dataType="model.dataType"
    />
  </el-table>
  <el-empty v-else :image-size="200" />
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, watch } from "vue";
import TreeTableColumn from "./column.vue";
import { getTreeTableDefalutData } from "./data";
export default defineComponent({
  value: "treeTable",
  components: { TreeTableColumn },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    col: {
      type: Array,
      default: () => []
    },
    type: {
      type: Array,
      default: () => []
    }
  },

  // emits: ["change", "load"],
  setup(props, ctx) {
    console.log(props, ctx);
    const model = reactive({
      colunms: [
        {
          name: "经费类别",
          align: "left",
          width: "240"
        }
      ],
      tableData: [],
      data: [],
      dataType: props.type
    });
    onMounted(async () => {
      model.tableData = getTreeTableDefalutData();
      model.data = props.value || [];
      getCloumn(props.col);
    });

    watch(props.col, (newValue, oldValue) => {
      console.log(oldValue);
      getCloumn(newValue);
    });

    watch(props.value, (newValue, oldValue) => {
      console.log(oldValue);
      model.data = newValue || [];
    });

    const getCloumn = data => {
      if (data && data.length > 0) {
        model.colunms = [
          {
            name: "经费类别",
            align: "left",
            width: "240"
          }
        ].concat(data);
      } else {
        if (model.data.length > 0) {
          model.colunms.length = 1; // 除了第一列，其他列避免重复
          model.data.forEach(el => {
            (model.colunms as any).push({
              name: el.deptName,
              align: "center",
              children: [
                {
                  parent: el.deptName,
                  name: "预算总额",
                  align: "center"
                },
                {
                  parent: el.deptName,
                  name: "政府资金",
                  align: "center"
                },
                {
                  parent: el.deptName,
                  name: "企业自筹",
                  align: "center"
                },
                {
                  parent: el.deptName,
                  name: "其他支出",
                  align: "center"
                }
              ]
            });
          });
        }
      }
    };

    return {
      model,
      getCloumn
    };
  }
});
</script>
<style lang="scss" scoped></style>
